<%--
  Created by IntelliJ IDEA.
  User: 86171
  Date: 2017/10/8
  Time: 19:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>bootstrap-modal学习</title>
    <link rel="stylesheet" href="/css/bootstrap.css">
    <script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap.js"></script>
    <script type="text/javascript" src="/js/pagejs/bootstrap/bootstrap-alert.js"></script>

</head>
<body>

<div class="row">
    <h1 style="align-content: center">模态框及与模态框相关的技术</h1>
</div>
<div class="row">
    <h2>创建模态框（modal）</h2>
    <!--按钮触发模态框-->
    <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
    <a href="bootstrap-modal" class="btn btn-primary" data-toggle="modal" data-target="#myModal"></a>
    <!--模态框（modal）-->
    <div class="modal" data-show = "true"  data-backdrop="static" id="myModal" tabindex="1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title">
                        模态框的标题！！！20171008
                    </h4>
                </div>
                <div class="modal-body">
                    这个div用来添加一些内容在里面
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" type="button" data-dismiss="modal">
                        关闭
                    </button>
                    <button class="btn btn-primary" type="button">
                        提交更改
                    </button>
                </div>
            </div>
        </div>

    </div>
</div>

<hr>
<div class="row">
    <button type="button" id="mybtn" class="btn btn-success">测试</button>
    <div id="test1">
        testfffffff
    </div>

</div>
</body>
<script type="text/javascript">
   $(function () {
       $("#mybtn").click(function () {
           alert();
           $("#test1").modal({
               keyboard: true
           });
       });

       //模态框事件
       $("#myModal").on("hide.bs.modal",function () {
           alert("模态框");
       });
   });
</script>
</html>
